<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>数据查询</title>
    <link href="../../css/Hui.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/swiper/swiper.min.css" rel="stylesheet" />
    <style type="text/css">
    </style>
</head>
<body>
    <div class="H-padding-vertical-bottom-10"></div>
    <header class="H-header H-theme-background-color9 H-padding-vertical-top-25" id="header">
        <span onclick="goBack()" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-theme-font-color-white H-padding-horizontal-left-5 H-z-index-100">
    		<i class="H-iconfont H-icon-target-back H-font-size-18 H-vertical-middle"></i>
    	</span>
        <div class="H-header-title H-center-all H-font-size-18 H-text-show-row-1 H-theme-font-color-white 
    	H-position-absolute H-width-100-percent">数据查询</div>
    </header>
	
	
    <div id="dataType" class="H-flexbox-horizontal H-theme-background-color-white">
        <div id="realData" class="H-flex-item H-center-all H-padding-vertical-both-10 H-theme-border-color-white H-touch-active H-font-size-16 H-theme-border-color9 H-theme-font-color9" style="border-width: 0 0 2px  0">
			实时数据
		</div>
        <div id="minuteData" class="H-flex-item H-center-all H-padding-vertical-both-10 H-theme-border-color-white H-touch-active H-font-size-16" style="border-width: 0 0 2px  0">
			分钟数据
		</div>
        <div id="hourData" class="H-flex-item H-center-all H-padding-vertical-both-10 H-theme-border-color-white H-touch-active H-font-size-16" style="border-width: 0 0 2px  0">
			小时数据
		</div>
        <div id="dayData" class="H-flex-item H-center-all H-padding-vertical-both-10 H-theme-border-color-white H-touch-active H-font-size-16" style="border-width: 0 0 2px  0">
			日数据
		</div>
    </div>
	
	
	<div class="H-flexbox-horizontal H-theme-background-color-white">
	    <div class="H-flexbox-horizontal H-margin-vertical-bottom-10">
	        <input id="dateTime" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="请选择监控日期" readonly="readonly" tapmode="" onclick="dateClick()" /><span class="H-icon H-vertical-middle H-padding-horizontal-right-10 H-theme-background-color-white"><i class="H-iconfont H-icon-time H-font-size-16 H-vertical-middle H-theme-font-color-999"></i></span>
	    </div>
	</div>
	
	<!-- <div class="H-flexbox-horizontal H-theme-background-color-white">
		<div class="H-flexbox-horizontal H-margin-vertical-bottom-10">
			<input id="alarmTypeText" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle 
	   H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12"
				placeholder="请选择报警类型" readonly="readonly" tapmode="" onclick="alarmType()" value="全部" />
				
			<input id="alarmType" type="hidden" value="-1" />	
			<span class="H-icon H-vertical-middle H-padding-horizontal-right-10 H-theme-background-color-white">
				<i class="H-iconfont H-icon-arrow-down H-font-size-16 H-vertical-middle H-theme-font-color-999"></i>
			</span>
		</div>
	</div> -->

    <div class="H-overflow-scrolling H-margin-10 H-position-relative">
        <table class="H-table H-table-fixed H-theme-background-color-white H-border-vertical-top-after H-border-horizontal-left-after">
            <thead>
                <tr>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after" rowspan="2">监控时间</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">pH</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">流量</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">氨氮</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">氨氮</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">氨氮</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">氨氮</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">流量</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">氨氮</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">氨氮</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">氨氮</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">氨氮</th>
                </tr>
                <tr>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">监测值</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">L/s</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">L/s</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">L/s</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">L/s</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">L/s</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">L/s</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">L/s</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">L/s</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">L/s</th>
                    <th class="H-padding-10 H-vertical-align-middle H-font-size-15 H-font-weight-500 H-theme-background-color-f4f4f4 H-border-vertical-bottom-after H-border-horizontal-right-after">L/s</th>
                </tr>
            </thead>
            <tbody id="container">
<!--                <tr>-->
<!--                    <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">000000012</td>-->
<!--                    <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">300ML 可口可乐</td>-->
<!--                    <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">￥3.50</td>-->
<!--                    <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">2016-05-15</td>-->
<!--                    <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">2018-05-15</td>-->
<!--                    <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">中山赢友网络科技有限公司</td>-->
<!--                    <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after"><span tapmode="" onclick="H.toastTip('功能开发中...');" class="H-display-inline-block H-padding-horizontal-both-5 H-theme-font-color1">编辑</span><span tapmode="" onclick="H.confirmTip(function (ret, err) { if (ret.buttonIndex == 1) { H.toastSuccess(); } }, '删除提示：','您确定要删除此记录吗？');" class="H-display-inline-block H-padding-horizontal-both-5 H-theme-font-color-red">删除</span></td>-->
<!--                </tr>-->

            </tbody>
        </table>
    </div>
    <script src="../../plugins/swiper/swiper.min.js"></script>
    <script src="../../script/H.js" type="text/javascript"></script>
    <script src="../../script/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script src="../../api.js" type="text/javascript"></script>
    <script src="../../script/vconsole.min.js"></script>
    <script>
        //初始化一下就可以了，
        let vConsole = new VConsole();
        //你打印的数据 比如
        console.log('test');
        //就可像小程序一样的看了和调试了。
    </script>


    <script type="text/javascript">
		
		var dataType = 0;
		var currDate = '';
		var deviceId = '';
		
		
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            slidesPerView: 3,
            paginationClickable: true,
            spaceBetween: 0
        });

        $(function(){
			currDate = getCurrentTimeString();
			$("#dateTime").val(currDate);
            deviceId = getQueryString("deviceId");
            searchDevice(deviceId, currDate, dataType);
			
			
			
        });

        var pageIndex = 1;

        function searchDevice(deviceId, currDate, dataType) {
			var beginTime = currDate + " 00:00:00";
			var endTime = currDate + " 23:59:59";
			
			
            $.ajax({
                type : "get",
                url : baseServer + 'poll/waterQuery?pageIndex=' + 1 
				+"&pageSize=10&userId=1&dataType="+ dataType 
				+"&deviceId="+ deviceId
				+"&beginTime="+beginTime
				+"&endTime=" + endTime,
                async : true,
                success : function(json){
                    if(json && json.code === 0){
                        var list = json.data.list;
                        joinHtml(list)
                    }
                },

            });
        }

        function joinHtml(data){
            $("#container").empty()
            for (let i = 0; i < data.length; i++) {
                var item = data[i];
                var sb='<tr>';
                sb+='       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">'+item.dateTime+'</td>';
                sb+='       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">'+item.ph+' '+item.phFlag+'</td>';
                sb+='       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">'+item.ph+' '+item.phFlag+'</td>';
                sb+='       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">'+item.ph+' '+item.phFlag+'</td>';
                sb+='       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">'+item.ph+' '+item.phFlag+'</td>';
                sb+='       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">'+item.ph+' '+item.phFlag+'</td>';
                sb+='       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">'+item.ph+' '+item.phFlag+'</td>';
                sb+='       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">'+item.ph+' '+item.phFlag+'</td>';
                sb+='       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">'+item.ph+' '+item.phFlag+'</td>';
                sb+='       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">'+item.ph+' '+item.phFlag+'</td>';
                sb+='       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">'+item.ph+' '+item.phFlag+'</td>';
                sb+='       <td class="H-padding-10 H-vertical-align-middle H-font-size-14 H-border-vertical-bottom-after H-border-horizontal-right-after">'+item.ph+' '+item.phFlag+'</td>';
                sb+='   </tr>';
                $("#container").append(sb)
            }


        }

		
		$('#dataType .H-flex-item').click(function() {
		    // 获取目标内容的 ID
		    var target = $(this);
		
		    // 移除所有内容的 active 类
		    $('.H-flex-item').removeClass('H-theme-font-color9');
			$('.H-flex-item').removeClass('H-theme-border-color9');
			
		
		    // 显示目标内容
		    $(target).addClass('H-theme-font-color9');
			$(target).addClass('H-theme-border-color9');
			var id = $(target).attr("id");
			
			
			if(id === "realData"){
				dataType = 0;
			}
			if(id === "minuteDa"){
				dataType = 1;
			}
			if(id === "hourData"){
				dataType = 2;
			}
			if(id === "dayData"){
				dataType = 3;
			}
			
			searchDevice(deviceId, currDate, dataType);
			
			
		});
		
		
		
		
		function dateClick(){
			H.dateTip(this, function (date) { 
				//H.alert(date); 
				$("#dateTime").val(date.year +"-"+date.month +"-"+date.day);
						searchDevice(deviceId, currDate, dataType);
			}, function (date) {
				H.toast('你点击了取消'); 
			});
		}
		
		
		
		
		
    </script>
</body>
</html>